<!--案件审批-->
<template>
  <div>
    <tablePage ref="tablePage" :auto-fetch="false" :searchForm.sync="searchForm" :searchFormRules="searchFormRules" :requestFunc="requestFunc" :beforePlayLoad="beforePlayLoad" @resetSearchForm="handleResetSearchForm">
      <template slot="search-form">
        <!--  <el-form-item label="审批类型" prop="type">
          <el-select v-model="searchForm.type" placeholder="请选择">
            <el-option v-for="item in typeArr" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item> -->

        <el-form-item label="审批状态" prop="status">
          <el-select v-model="searchForm.status" placeholder="请选择">
            <el-option v-for="item in statusArr" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="提交时间" prop="dateRange">
          <el-date-picker type="daterange" v-model="searchForm.dateRange" range-separator="至" value-format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
        </el-form-item>

        <el-form-item label="案件名称" prop="title">
          <el-input v-model="searchForm.title" placeholder="请输入案件名称关键字"></el-input>
        </el-form-item>
      </template>

      <template slot="rows">
        <el-table-column prop="workOrderNumber" label="案件编号" width="200" align="center"></el-table-column>
        <el-table-column prop="title" label="案件名称" show-overflow-tooltip>
          <template slot-scope="{ row }">
            <div class="ellipsis title" :class="{ 'color-danger': row.expireFlag === 'Y' }">
              <span v-if="row.expireFlag === 'Y'">[过期]&nbsp;</span>
              <template v-else>
                <i v-if="row.appraiseFlag === 'Y'" class="img icon-ping"></i>
                <i v-if="row.wordsFlag === 'Y'" class="img icon-liu"></i>
              </template>
              <span v-if="![1, 2].includes(row.status) && row.auditCheck" class="color-danger">[待我审批]&nbsp;</span>
              <span>{{ row.title }}</span>
            </div>
            <!--            <div v-if="row.expireFlag === 'Y'" class="color-danger ellipsis title">[过期] {{ row.title }}</div>-->
            <!--            <div v-else class="ellipsis title">-->
            <!--              <i v-if="row.appraiseFlag === 'Y'" class="img icon-ping"></i>-->
            <!--              <i v-if="row.wordsFlag === 'Y'" class="img icon-liu"></i>-->
            <!--              {{ row.title }}-->
            <!--            </div>-->
          </template>
        </el-table-column>

        <el-table-column label="审批类型" width="130px">
          <template slot-scope="{ row }">
            <template>{{ row.type | workOrderAuditType }}</template>
          </template>
        </el-table-column>

        <el-table-column label="状态" width="180px">
          <template slot-scope="{ row }">
            <span :class="row.status === 2 ? 'color-danger' : 'color-success'">{{ row.auditStatus }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="createTime" label="创建时间" width="180px"></el-table-column>
        <el-table-column prop="filingTime" label="立案时间" width="180px"></el-table-column>

        <el-table-column label="操作" width="150" align="center">
          <template slot-scope="{ row }">
            <el-button @click="handleShowDialog('detailsDialog', row)" type="primary" plain size="mini">
              <template v-if="![1, 2].includes(row.status) && row.auditCheck">审批</template>
              <template v-else>查看</template>
            </el-button>
          </template>
        </el-table-column>
      </template>
    </tablePage>

    <detailsDialog ref="detailsDialog" type="audit" :visible.sync="detailsDialog.visible" :id="currentRow.id" :canShowAppraiseForm="true" @read="handleReadComment">
      <template v-slot:footer-btn="{ details }">
        <!-- 
          canAudit  是否可以审核    是：Y   否：N
          workOrderAudit  status   0-未审批，1-已通过，2-已驳回
        -->
        <!--  {{ details.workOrderAudit && details.workOrderAudit.status }}
        {{ details.canAudit }}
        {{ details.workOrderAudit && ![1, 2].includes(details.workOrderAudit.status) }} -->
        <template v-if="details.workOrderAudit && ![1, 2].includes(details.workOrderAudit.status) && details.canAudit === 'Y'">
          <el-button @click="throughDialog.visible = true" type="primary">通过</el-button>
          <el-button @click="rebutDialog.visible = true" type="primary">驳回</el-button>
        </template>
      </template>
    </detailsDialog>

    <!-- 驳回-->
    <rebutDialog :visible.sync="rebutDialog.visible" @success="rePlayLoadData" :id="currentRow.id" :type="currentRow.type"></rebutDialog>
    <!-- 通过-->
    <throughDialog :visible.sync="throughDialog.visible" @success="rePlayLoadData" :id="currentRow.id" :type="currentRow.type"></throughDialog>

    <previewDialog :visible.sync="previewDialog.visible" :filePath="previewDialog.fileURL"></previewDialog>
  </div>
</template>

<script>
import tablePage from "@/components/tablePage/index.vue";
import searchFormItemsCommon from "@/views/workOrder/components/searchFormItemsCommon/searchFormItemsCommon";
import tableColumnsCommon from "@/views/workOrder/components/tableColumnsCommon";
import detailsDialog from "./components/detailsDialog";
import rebutDialog from "./components/rebutDialog";
import throughDialog from "./components/throughDialog";
import multiCheckbox from "@/components/multiCheckbox/index.vue";
import previewDialog from "@/views/workOrder/components/previewDialog";

import * as workOrderApi from "@/api/workOrder/index";
import { workOrderStatus, timeRemaining, workOrderPublicStatus, txt2HTML, workOrderAuditType, workOrderAuditStatus, workOrderProcessAuditStatus } from "@/utils/filters";
import { workOrderAuditTypeDict } from "@/utils/dict";
import * as mixins from "@/utils/mixins";
import { initSearchFormRules, initSearchForm } from "@/views/workOrder/components/searchFormItemsCommon/mixin";
import * as fileApi from "@/api/file";
// import { generateWorkOrderStatusArr } from "@/utils/common";
// import * as departmentConfigureAPI from "@/api/departmentConfigure";

export default {
  name: "approval",
  mixins: [mixins.affirm],
  components: {
    tablePage,
    searchFormItemsCommon,
    detailsDialog,
    tableColumnsCommon,
    multiCheckbox,
    rebutDialog,
    throughDialog,
    previewDialog,
  },
  filters: {
    workOrderStatus,
    timeRemaining,
    workOrderPublicStatus,
    workOrderAuditType,
    workOrderAuditStatus,
    workOrderProcessAuditStatus,
  },
  data() {
    // const statusArr = generateWorkOrderStatusArr(
    //   [
    //     { id: 0, name: "未审批" },
    //     { id: 1, name: "审批通过" },
    //     { id: 2, name: "审批不通过" },
    //     // { id: '10', name: '已撤回' },
    //   ],
    //   []
    // );
    return {
      searchForm: {
        title: "",
        dateRange: [],
        // status: statusArr[0].id,
        // status: "1,2,3,4,5,6,7,8,9,10,11,12,13,14,15",
        status: "",
        // status: [],
        type: "",
      },
      auditStatus: [],
      searchFormRules: initSearchFormRules(),
      // statusArr: [
      //   // { id: 15, name: "省级主管部门" },
      //   // { id: 14, name: "上级主管部门" },
      //   // { id: 13, name: "主管部门" },
      //   { id: 12, name: "经办人审批" },
      //   { id: 11, name: "单位负责人" },
      //   { id: 1, name: "审批通过" },
      //   { id: 2, name: "审批不通过" },
      // ],
      statusArr: [],
      // statusArr: statusArr,
      typeArr: [
        { id: 0, name: "全部" },
        { id: 12, name: "经办人审批" },
        { id: 11, name: "单位负责人" },
      ],
      currentRow: {},
      rows: [],
      detailsDialog: {
        editDetails: {},
        visible: false,
      },
      previewDialog: {
        fileURL: "",
        visible: false,
      },
      rebutDialog: { visible: false },
      throughDialog: { visible: false },
      workOrderAuditTypeDict: workOrderAuditTypeDict,
    };
  },
  watch: {
    // 'auditStatus': {
    //   handler() {
    //     if (this.auditStatus.length >= this.statusArr.length && this.$route.query.source !== 'home') {
    //       this.searchForm.status = [...defaultSearchFormStatus]
    //     } else {
    //       this.searchForm.status = [...this.auditStatus]
    //     }
    //   },
    //   immediate: true
    // }
  },
  created() {
    /* departmentConfigureAPI.getTypeListData().then((r) => {
      const result = r.result;
      const arr = [];
      result.forEach((item) => {
        if (item.value === "1") {
          item.name = item.customName;
          arr.push(item);
        }
      });
      this.statusArr = [...arr, ...this.statusArr];
      this.searchForm.status = this.statusArr.map((item) => item.id);

      this.$nextTick(() => {
        this.$refs.tablePage.setActiveSearchForm(this.searchForm);
        this.$refs.tablePage.playLoadData();
      });
    }); */
    /* this.getAuditStatusList().then((res) => {
      this.$nextTick(() => {
        this.$refs.tablePage.setActiveSearchForm(this.searchForm);
        this.$refs.tablePage.playLoadData();
      });
    }); */
    this.getAuditStatusList();
    // console.log(this.searchForm);

    let typeArr = [];
    for (const key in this.workOrderAuditTypeDict) {
      if (Object.prototype.hasOwnProperty.call(this.workOrderAuditTypeDict, key)) {
        const element = this.workOrderAuditTypeDict[key];
        typeArr.push({
          id: key,
          name: element,
        });
      }
    }
    this.typeArr = [{ id: "", name: "全部" }, ...typeArr];
  },
  methods: {
    requestFunc: workOrderApi.audit.list,
    beforePlayLoad(form) {
      // this.searchForm.status = this.statusArr[0].value;
      return form;
    },
    getAuditStatusList() {
      workOrderApi.all.getAuditStatusList().then((res) => {
        this.statusArr = res.result;
        this.searchForm.status = this.statusArr[0].value;
        this.$nextTick(() => {
          this.$refs.tablePage.setActiveSearchForm(this.searchForm);
          this.$refs.tablePage.playLoadData();
        });
      });
    },

    handleResetSearchForm() {
      this.searchForm.status = this.statusArr[0].value;
      // console.log(this.searchForm.status);
    },
    rePlayLoadData() {
      this.$refs.tablePage.playLoadData();
      if (this.detailsDialog.visible) {
        this.$refs.detailsDialog.playLoadData();
      }
    },
    handleReadComment() {
      // this.currentRow.appraiseFlag = 'N'
    },
    handleReadLeaveMessage() {
      this.currentRow.wordsFlag = "N";
    },
    handleShowDialog(type, row) {
      this[type].visible = true;
      this.currentRow = row;
    },
    handleDownload(row) {
      fileApi.download({
        downloadFileName: row.fileName,
        filePath: row.fileUrl,
      });
    },
    handlePreview(row) {
      this.previewDialog = {
        visible: true,
        fileURL: row.fileUrl,
      };
    },
  },
};
</script>

<style lang="less" scoped>
.title {
  display: flex;
  align-items: center;

  .icon-liu,
  .icon-ping {
    content: "";
    margin-right: 0;
    background-size: 28px;
    display: inline-block;
    width: 28px;
    height: 28px;
    background-position-y: 2px;
    background-repeat: no-repeat;
  }

  .icon-ping {
    background-image: url("../../assets/images/common/icon-ping.png");
  }

  .icon-liu {
    background-image: url("../../assets/images/common/icon-liu.png");
  }
}
</style>
